<template>
  <a-row class="table-search" :gutter="18">
    <a-col :span="4">
      <a-tree-select
          :showSearch="true"
          treeNodeFilterProp="title"
          class="table-search-input"
          :dropdownStyle="{
            height: '350px',
            overflowX: 'hidden'
          }"
          :placeholder="selectPleaseHolder"
          :treeData="tableSearchSelectOptions"
          :value="tableSearchSelectValue.enterpriseGuid"
          @focus="tableSearchSelectOnFocus"
          @change="tableSearchTreeChange"
      />
    </a-col>
    <a-col :span="4">
      <a-select
          :showSearch="true"
          :disabled="tableSearchDropDownSelectDisable"
          class="table-input-input"
          :dropdownStyle="{
                width: 'auto',
                maxHeight: '350px'
          }"
          :placeholder="dropDownSelectPleaseHolder"
          :value="tableSearchSelectValue.programName"
          @focus="tableSearchDropDownSelectOnFocus"
          @change="tableSearchSelectChange"
      >
        <a-select-option
            v-for="item in tableSearchDropDownSelectOptions"
            :key="selectOptionMapKey ? item[selectOptionMapKey] : item.id"
            :value="selectOptionValueKey ? item[selectOptionValueKey] : item.id"
        >
          {{
            selectOptionNameKey ? item[selectOptionNameKey] : item.name
          }}
        </a-select-option>
      </a-select>
    </a-col>
    <template v-if="Number(TableContext.defaultActiveKey) !== 1">
      <a-col :span="4">
        <a-popconfirm
            overlayClassName="form-pop-confirm"
            placement='bottom'
            cancelText="重置"
            @cancel="tableSearchMapCancel"
            @confirm="tableSearchMapSearch"
        >
          <template slot="icon">
            <span/>
          </template>
          <template slot="title">
            <a-form layout="inline" class="search-form">
              <a-form-item v-for="item in tableSearchPopConfirmSearch" :key="item.label" :label="item.label"
                           :name="item.formValue">
                <template v-if="item.componentType === 'select'">
                  <a-select
                      :getPopupContainer="(triggerNode) => triggerNode.parentElement"
                      :placeholder="`请选择${item.label}`"
                      @change="(value) => tableSearchMapKeyOnChange(item.formValue.renderKey, value)"
                      v-model="item.defaultValue"
                      :dropdownStyle="{width: 'auto', maxHeight: '350px'}"
                      @focus="() => selectOptionFocus(item.componentType, item)"
                  >
                    <template v-if="item.columnSelectOptions">
                      <a-select-option
                          v-for="option in item.columnSelectOptions"
                          :key="item.formValue.renderMapKey ? option[item.formValue.renderMapKey] : option.key"
                          :value="item.formValue.renderKey ? option[item.formValue.renderKey] : option.key"
                      >
                        {{ item.formValue.renderValue ? option[item.formValue.renderValue] : option.value }}
                      </a-select-option>
                    </template>
                    <template v-else>
                      <a-select-option
                          v-for="option in item.selectOptions"
                          :key="item.formValue.renderMapKey ? option[item.formValue.renderMapKey] : option.key"
                          :value="item.formValue.renderKey ? option[item.formValue.renderKey] : option.key"
                      >
                        {{ item.formValue.renderValue ? option[item.formValue.renderValue] : option.value }}
                      </a-select-option>
                    </template>
                  </a-select>
                </template>
                <template v-else-if="item.componentType === 'treeSelect'">
                  <a-tree-select
                      :dropdownStyle="{
                            whiteSpace: 'nowrap',
                            textOverflow: 'ellipsis',
                            overflow: 'auto',
                            height: '350px'
                      }"
                      v-model="item.defaultValue"
                      :getPopupContainer="(triggerNode) => triggerNode.parentElement"
                      :treeData="item.selectOptions"
                      :placeholder="`请选择${item.label}`"
                      @change="(value) => tableSearchMapKeyOnChange(item.formValue.renderKey, value)"
                      @focus="() => selectOptionFocus(item.componentType, item)"
                  />
                </template>
                <template v-else>
                  <a-input :disabled="!!item.disabled" :placeholder="`请选择${item.label}`"/>
                </template>
              </a-form-item>
            </a-form>
          </template>
          <a-button type="link">
            <a-icon type="filter"/>
            筛选
          </a-button>
        </a-popconfirm>
      </a-col>
    </template>
  </a-row>
</template>

<script>
import {asyncFocusService, getTaskHandleNodeFreeSelectUser} from "@/api/approve/approve";
import {renderAntTreeSelectData} from "@/utils";

export default {
  name: "TableSearch",
  inject: {
    connectStore: {
      default: () => ({})
    },

  },
  props: {
    tableSearchSelectValue: {
      type: Object,
      default: () => ({}),
    },
    selectPleaseHolder: {
      type: String,
      default: () => '',
    },
    tableSearchSelectOptions: {
      type: Array,
      default: () => ([]),
    },
    tableSearchSelectOnFocus: {
      type: Function,
      default: () => void 0,
    },
    dropDownSelectPleaseHolder: {
      type: String,
      default: () => '',
    },
    tableSearchDropDownSelectOnFocus: {
      type: Function,
      default: () => void 0,
    },
    tableSearchDropDownSelectOptions: {
      type: Array,
      default: () => ([]),
    },
    selectOptionMapKey: {
      type: String,
      default: () => '',
    },
    selectOptionNameKey: {
      type: String,
      default: () => '',
    },
    selectOptionValueKey: {
      type: String,
      default: () => '',
    },
    tableSearchDropDownSelectDisable: {
      type: Boolean,
      default: () => false,
    },
    isAntIcon: {
      type: Boolean,
      default: () => false,
    },
    isCreateIcon: {
      type: Boolean,
      default: () => false,
    },
    createIconOptions: {
      type: Object,
      default: () => ({}),
    },
    antIconOptions: {
      type: Object,
      default: () => ({}),
    },
    tableSearchPopConfirmSearch: {
      type: Array,
      default: () => ([]),
    },
    tableSearchDropDownSelectOptionOnChange: {
      type: Function,
      default: (value, options) => ({value, options}),
    },
    tableSearchMapKeyOnChange: {
      type: Function,
      default: (mapKey, value) => ({mapKey, value}),
    },
    tableSearchMapSearch: {
      type: Function,
      default: () => void 0,
    },
    tableSearchMapCancel: {
      type: Function,
      default: () => void 0,
    },
    getTableSearchAllKey: {
      type: Function,
      default: (ObjectKey) => (ObjectKey),
    },
    bpmAction: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {
      newProNameModal: {
        visible: false,
        title: '请输入项目名',
        destroyOnClose: true,
        value: undefined
      }
    }
  },
  methods: {
    tableSearchTreeChange(value, label, extra) {
      const {triggerNode} = extra
      const {dataRef: props} = triggerNode;
      // eslint-disable-next-line no-unused-vars
      const {id, levelNum, pid, text, title, enterpriseIsbnCode: enterpriseCode, ...propsMapKey} = props;
      this.$emit('getEnterpriseIsbnCode', enterpriseCode)
      //getTaskHandleNodeFreeSelectUser
      // this.bpmAction.extendConf.enterpriseGuid = value //enterpriseGuid参数值为enterpriseIsbnCode值
      this.bpmAction.extendConf.enterpriseGuid = enterpriseCode
      getTaskHandleNodeFreeSelectUser({...this.bpmAction}).then((res) => {
        const {success, data} = res;
        if (success) {
          this.$emit('getProcessFlow', {
            branchConditionRadio: data.nodeNameMap,
            branchAboutToFlowRadio: data.nodeIdentitysMap
          })
            // this.ProcessTabsContext.branchConditionRadio = data.nodeNameMap
            // this.ProcessTabsContext.branchAboutToFlowRadio = data.nodeIdentitysMap
        } else {
          this.$emit('getProcessFlow', {
            branchConditionRadio: {},
            branchAboutToFlowRadio: []
          })
            // this.ProcessTabsContext.branchConditionRadio = {};
            // this.ProcessTabsContext.branchAboutToFlowRadio = [];
        }
      })
      this.getTableSearchAllKey({...propsMapKey, enterpriseCode})
      const {enterpriseKind, enterpriseIsbnCode} = props
      this.TableContext.enterpriseGuid = value
      this.$emit('update:tableSearchSelectValue', {
        ...this.tableSearchSelectValue,
        enterpriseGuid: value,
        enterpriseKind,
        enterpriseCode: enterpriseIsbnCode,
        programName: undefined
      })
      this.$emit('update:tableSearchDropDownSelectOptions', [])
      this.$emit('update:tableSearchDropDownSelectDisable', false)
    },
    tableSearchSelectChange(e, option) {
      this.$emit('update:tableSearchSelectValue', {
        ...this.tableSearchSelectValue,
        programName: this.tableSearchDropDownSelectOptions.find(item => item[this.selectOptionValueKey] === e)[this.selectOptionNameKey],
        programTypeName: this.tableSearchDropDownSelectOptions.find(item => item[this.selectOptionValueKey] === e).programTypeName
      })
      this.tableSearchDropDownSelectOptionOnChange(this.tableSearchDropDownSelectOptions.find(item => item[this.selectOptionValueKey] === e)[this.selectOptionNameKey], option)
    },
    async selectOptionFocus(componentType, item) {
      if (item.columnSelectOptions) {
        item.selectOptions = item.columnSelectOptions
      } else {
        await asyncFocusService(item.focusUrl, {
          ...this.TableContext.focusData
        }).then(async res => {
          const {success, data} = res
          if (success) {
            if (item.componentType === 'select') {
              item.selectOptions = data
            } else if (item.componentType === 'treeSelect') {
              item.selectOptions = renderAntTreeSelectData(data, item.formValue.renderValue, item.formValue.renderKey, true);
            }
          }
        })
      }

    }
  },
  computed: {
    TableContext() {
      return this.connectStore.value.TableContext;
    },
    ProcessTabsContext() {
      return this.connectStore.value.ProcessTabsContext;
    },
  }
}
</script>

<style scoped lang="less">
.table-search {
  display: flex !important;
  align-items: center;
  height: 100% !important;
  box-sizing: border-box !important;

  .ant-col {
    > span, > div {
      width: 100%;
    }
  }
}
</style>
